<!--
 * @Descripttion:
 * @version:
 * @Editor: E-CHOOSEUS R&D
 * @LastEditors: E-CHOOSEUS R&D
-->
<template>
  <div class="BloodGlucoseTest">
    <div
      v-for="(item, index) in 2"
      :key="'_' + index"
      class="line-1 left txt-c"
    >
      <div class="box-3 bor-r left">日期</div>
      <div class="box-4 bor-r left">时间</div>
      <div class="box-5 line-2 bor-r left">血糖<br />mmol/l</div>
      <div class="box-1 bor-r left">执行人</div>
      <div class="box-1 bor-r left">核对人</div>
      <div class="box-2 left" :class="{ 'bor-r': index == 0 }">备注</div>
    </div>
    <div class="clearfloat txt-c">
      <template v-for="(item, idx) in tableConf">
        <div
          :key="idx + 'date' + key"
          class="line-1 box-3 bor-r bor-t left relative"
        >
          <DatePicker
            v-model="item.date"
            :class="errorClass(item)"
            select-interval
            value-format="timestamp"
            format="yyyy-MM-dd"
            clearable
          />
        </div>
        <div
          :key="idx + 'time' + key"
          class="line-1 box-4 bor-r bor-t left relative"
        >
          <!-- <TimePicker v-model="item.timePoint" class="txt-c" placeholder=" " /> -->
          <DateSelection
            v-model="item.timePoint"
            class="txt-c"
            :class="errorClass(item)"
            style="width: 100%; justify-content: center; padding: 0"
            value-format="HH:mm"
            :simple-op="true"
            :date-picker-show="false"
            :has-border="false"
            :display-num="!item.timePoint"
            :need-time-icon="false"
          />
        </div>
        <div
          :key="idx + 'value' + key"
          class="line-1 box-5 bor-r bor-t left relative"
        >
          <input
            :id="idx + '-1'"
            v-model="item.value"
            class="inputBox txt-c line-3"
            :class="errorClass(item)"
            oninput="value=value.replace(/[^0-9.]/g,'')"
            @keyup.up="moveFocus(idx - 1 + '-1')"
            @keyup.right="moveFocus(idx + '-2')"
            @keyup.down="moveFocus(idx + 1 + '-1')"
            @keyup.left="moveFocus(idx - 1 + '-3')"
          />
        </div>
        <div
          :key="idx + 'zxr' + key"
          class="line-1 box-1 bor-r bor-t left relative"
        >
          <input
            :id="idx + '-2'"
            v-model="item.zxr"
            class="inputBox txt-c line-3"
            :class="errorClass(item)"
            @keyup.up="moveFocus(idx - 1 + '-2')"
            @keyup.right="moveFocus(idx + '-3')"
            @keyup.down="moveFocus(idx + 1 + '-2')"
            @keyup.left="moveFocus(idx + '-1')"
          />
        </div>
        <div
          :key="idx + 'hdr' + key"
          class="line-1 box-1 bor-r bor-t left relative"
        >
          <input
            :id="idx + '-2'"
            v-model="item.hdr"
            class="inputBox txt-c line-3"
            :class="errorClass(item)"
            @keyup.up="moveFocus(idx - 1 + '-2')"
            @keyup.right="moveFocus(idx + '-3')"
            @keyup.down="moveFocus(idx + 1 + '-2')"
            @keyup.left="moveFocus(idx + '-1')"
          />
        </div>
        <div
          :key="idx + 'remark'"
          :class="[
            'line-1',
            'box-2',
            'bor-t',
            'left',
            'relative',
            idx % 2 == 0 ? 'bor-r' : ''
          ]"
        >
          <input
            :id="idx + '-3'"
            v-model="item.remark"
            class="inputBox txt-c line-3"
            :class="errorClass(item)"
            @keyup.up="moveFocus(idx - 1 + '-3')"
            @keyup.right="moveFocus(idx + 1 + '-1')"
            @keyup.down="moveFocus(idx + 1 + '-3')"
            @keyup.left="moveFocus(idx + '-2')"
          />
        </div>
      </template>
    </div>
  </div>
</template>
<script>
import { format } from 'date-fns'
import { computed, defineComponent, reactive, toRefs, watch } from 'vue'

import DateSelection from '@/components/DateSelection/indexV2.vue'
import DatePicker from '@/components/MyComp/DatePicker.vue'
import { getStoreFromInstance } from '@/utils/instance'
import TimePicker from '@/views/homeNew/components/TimePicker.vue'

export default defineComponent({
  name: 'BloodGlucoseTest',
  components: {
    DatePicker,
    TimePicker,
    DateSelection
  },
  props: {
    data: {
      type: Array,
      default: () => []
    },
    errorTime: {
      type: Array,
      default: () => []
    }
  },
  setup(props) {
    const state = reactive({
      tableConf: [],
      key: +new Date()
    })

    const store = getStoreFromInstance()

    const patCur = computed(() => store.getters.patCur)

    function initData() {
      state.tableConf = props.data
    }

    function getParams() {
      return state.tableConf
    }

    function moveFocus(e) {
      const node = document.getElementById(e)
      if (node) {
        node.focus()
      }
    }

    function errorClass(item) {
      if (!item.date || !item.timePoint) {
        return
      }
      const time = +new Date(
        format(item.date, 'yyyy-MM-dd') +
          ' ' +
          formatTimePoint(item.timePoint) +
          ':00'
      )
      if (props.errorTime.includes(time)) {
        return 'error'
      }
    }
    function formatTimePoint(time) {
      if (typeof time == 'number') {
        const date = new Date(time)
        return `${date.getHours()}:${date.getMinutes()}`
      } else {
        return time
      }
    }

    watch(
      () => props.data,
      () => {
        initData()
      },
      { immediate: true }
    )
    watch(
      () => props.errorTime,
      () => {
        state.key = +new Date()
      }
    )

    return {
      ...toRefs(state),
      getParams,
      moveFocus,
      errorClass
    }
  }
})
</script>

<style lang="scss" scoped>
@import '@/views/doc/styles/doc-common.scss';

.BloodGlucoseTest {
  position: relative;
  width: 796px;
  border: 1px solid #000;
  box-sizing: content-box;
  margin: 0 auto;

  .bor {
    &-a {
      border: 1px solid #000;
    }
  }

  .txt {
    &-c {
      text-align: center;
    }
  }

  .line {
    &-1 {
      height: 36px;
      line-height: 36px;
    }
  }

  .line {
    &-2 {
      height: 36px;
      line-height: 18px;
    }
  }

  .line {
    &-3 {
      padding: 9px 0;
    }
  }

  .box-1 {
    width: 60px;
  }

  .box-2 {
    width: 105px;
  }

  .box-3 {
    width: 78px;
  }

  .box-4 {
    width: 45px;
  }

  .box-5 {
    width: 50px;
  }

  .mt-7 {
    margin-top: 7px;
  }

  .bor {
    &-r {
      border-right: 1px solid #000;
      box-sizing: border-box;
    }

    &-t {
      border-top: 1px solid #000;
      box-sizing: border-box;
    }
  }

  .flex {
    display: flex;
  }

  .flex {
    &-1 {
      flex: 1;
      height: 100%;
    }
  }

  .inputBox {
    border: none;
    background-color: rgba($color: #000, $alpha: 0%);
    outline: none;
    width: 100%;
    // height: 34px;
    // line-height: 32px;
  }

  .relative {
    position: relative;
  }

  ::v-deep .txt-c {
    text-align: center;

    .el-input__inner {
      text-align: center;
    }
  }
}

::v-deep {
  .el-date-editor {
    width: 74px;

    .el-input__inner {
      font-size: 14px;
    }

    .el-input__suffix {
      display: inline-block;
    }
  }

  .error {
    color: #f56c6c;

    .el-input__inner {
      color: #f56c6c;
    }
  }

  .el-input.is-disabled .el-input__inner {
    background-color: #fff;
  }

  .DateSelV2 {
    font-family: inherit;
    font-size: 13px;
    margin-top: 2px;

    .ml-3 {
      margin-left: 0;
    }

    .clear {
      top: -3px;
      right: -1px;
      padding-right: 0;
      height: 12px;

      .clearIcon {
        margin-left: 0;
      }
    }

    .timeItem {
      width: 8px;
    }

    &.disabled {
      background-color: #fff;
      border-color: transparent;
      color: #000;
    }
  }

  input:disabled {
    color: #000;
    background: #fff;
  }
}
</style>
